@extends('layouts.header')
@section('content')
<article class="page-container">
    <form class="form form-horizontal" id="form" autocomplete="off">
        <div class="row cl">
            <label class="form-label col-sm-3">样品类型：</label>
            <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->toolname }}</label>
            <input type="hidden" name="tool_id" value="{{ $data_rel->tool_id }}">
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">检验标准：</label>
            <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->num }}</label>
            <input type="hidden" name="std_id" value="{{ $data_rel->std_id }}">
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">检验项目：</label>
            <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->itemname }}</label>
            <input type="hidden" name="item_id" value="{{ $data_rel->id }}">
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">映射检验标准：</label>
            <div class="form-label col-sm-6">
                <select class="input-text required" name="std_id_map" id="">
                    <option value="">请选择</option>
                    @foreach($data_rel_other as $k => $item)
                        <option value="{{$k}}" @if(isset($map['info']->std_id) && $map['info']->std_id === $k) selected @endif >{{$item[0]->num}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">映射检验项目：</label>
            <div class="form-label col-sm-6">
                <select class="input-text required" name="id_map" id="">
                    <option value="">请选择</option>
                    @if(isset($map['info']->std_id))
                        @foreach($data_rel_other[$map['info']->std_id] as $k => $item)
                            <option value="{{$item->id}}" @if($item->id === $map['info']->id) selected @endif >{{$item->name}}</option>
                        @endforeach
                    @endif
                </select>
            </div>
        </div>
        @csrf

        <div class="row cl">
            <div class="col-sm-9 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;一键映射&nbsp;&nbsp;">
                <input class="btn btn-primary radius f-r mr-15" type="submit" value="保存表格" form="form-table">
            </div>
        </div>
    </form>
    <div class="mt-15">
        <table class="table table-border table-bordered table-hover table-bg table-responsive table-condensed">
            <thead>
            <tr class="text-c">
                <th>当前标准：{{ $data_rel->num }}</th>
                <th>映射标准: <span id="tb_num_rel"></span></th>
            </tr>
            </thead>
            <tbody>
            <tr class="va-t">
                <td>
                    <table class="table table-border table-bordered table-hover table-bg">
                        <thead>
                        <tr class="text-c">
                            <th>数据标题</th>
                            <th>单位</th>
                            <th>映射关系</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($data as $val)
                            <tr class="text-c">
                                <td class="data_key">{{ $val->data_key }}</td>
                                <td>{{ $val->data_unit }}</td>
                                <td id="exist-{{$val->id_map}}">
                                    @if($val->id_map > 0)
                                        已映射编号:{{$val->id_map}}
                                        <b class="btn btn-primary radius size-MINI ml-10" onclick="del(this,{{$val->id}})">删除</b>
                                    @else
                                        <span class="btn btn-primary radius size-MINI" onclick="map(this,'{{$val->id}}')">点击映射</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </td>
                <td>
                    <table class="table table-border table-bordered table-hover table-bg">
                        <thead>
                        <tr class="text-c">
                            <th>编号</th>
                            <th>数据标题</th>
                            <th>单位</th>
                        </tr>
                        </thead>
                        <tbody id="tb_rel_tr">
                        @if(!empty($map))
                            @foreach ($map['data'] as $val)
                                <tr class="text-c">
                                    <td>{{ $val->id }}</td>
                                    <td>{{ $val->data_key }}</td>
                                    <td>{{ $val->data_unit }}</td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</article>

<script type="text/javascript">
    var data_rel_other = @json($data_rel_other);
    var map_data = @json(data_get($map,'data',[]));
    var index2;
    $(function () {
        $('#tb_num_rel').text($('select[name="std_id_map"]').find("option:selected").text());
        $('.select2').select2();
        $("#form").validate({
            rules: {
                std_id_map: {
                    required: true,
                },
                id_map: {
                    notSpace: true,
                },
            },
            success: "valid",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: 'post',
                    url: "",//自己提交给自己可以不写url
                    beforeSend: function () {
                        //0.4透明度 白色遮罩
                        index2 = layer.load(2, {shade: [0.3, '#fff']});
                    },
                    complete: function () {
                        layer.close(index2);
                    },
                    success: function (data) {
                        let time = 2000;
                        //判断添加结果
                        if (parseInt(data.code) === 1) {
                            window.location.reload();//刷新
                            time = 1000;
                        }
                        layer.msg(data.msg, {icon: data.code, time: time});
                    },
                    error: function (data) {
                        console.log(data);
                        ajax_error(data);
                    }///error---end
                });
            }
        });
    });
    //对应检测项目
    $('select[name="std_id_map"]').on('change',function () {
        let check_std_id = $(this).val();
        $('#tb_num_rel').text($(this).find("option:selected").text());
        let item_rels = data_rel_other[check_std_id];
        let options = "<option value=''>请选择</option>";
        for (index in item_rels) {
            let id = item_rels[index].id;
            options += "<option value='" + id + "'>" + item_rels[index].name + "</option>";
        }
        $('select[name="id_map"]').html(options);
    })
    //对应检测项目数据
    $('select[name="id_map"]').change(function () {
        let id = $(this).val();
        $('#tb_item_rel').text($(this).find("option:selected").text());
        $.ajax({
            type: 'GET',
            url: 'relation?id=' + id,
            success: function (data) {
                let str = "";
                for (index in data) {
                    str += '<tr class="text-c">' +
                        '<td>' + data[index].id + '</td>' +
                        '<td>' + data[index].data_key + '</td>' +
                        '<td>' + data[index].data_unit + '</td>' +
                        '</tr>';
                }
                $('#tb_rel_tr').html(str);
                map_data = data;
            },
            error: function (data) {
                ajax_error(data);
            },
            beforeSend: function () {
                index2 = layer.load(2, {shade: [0.05, '#000']});
            },
            complete: function () {
                layer.close(index2);
            },
        });
    })
    function map(e,testdata_key_id) {
        let title = $(e).parent('td').siblings('td.data_key').text();
        let for_map_data = [];
        let content = '<div class="ml-20 mt-20 text-c col-sm-10"><select class="select2 input-text" name="id_map_key">';
        for (index in map_data) {
            $('#exist-' + map_data[index].id)[0] ? '' : for_map_data.push(map_data[index]);
        }
        content += for_map_data.length === 0 ? '<option value="">无可映射关系</option>' : '<option value="">请选择</option>';
        let mapindexdata = null;
        for (index in for_map_data) {
            mapindexdata = for_map_data[index];
            content += '<option value="' + mapindexdata.id + '">标题：' + mapindexdata.data_key + ' &nbsp;&nbsp;&nbsp;&nbsp;单位：' + mapindexdata.data_unit + '</option>';
        }
        content += '</select>' +
            '<input class="mt-20 btn btn-primary radius" type="button" value="确定" onclick="formAjax(\''+$(e).closest('td').attr('id')+'\','+testdata_key_id+')">' +
            '</div>';
        layer.open({
            type: 1, //类型
            closeBtn: 1, //关闭按钮是否显示 1显示0不显示
            title: '点对点映射: ' + title, //页面标题
            shadeClose: true, //点击遮罩区域是否关闭页面
            shade: 0.5,  //遮罩透明度
            area: ['500px', '300px'],  //弹出层页面比例
            content: content,
        })
    }

    function formAjax(tdId,testdata_key_id) {
        let id_map_key = $("[name=id_map_key]").val();
        if (id_map_key === '') {
            layer.msg('请选择映射关系！');
            return false;
        }
        $.ajax({
            type: 'post',
            url: '',
            data: {
                _token: '{{csrf_token()}}',
                id_map: id_map_key,
                testdata_key_id: testdata_key_id,
            },
            success: function (res) {
                location.reload();//刷新
            },
            error: function (data) {
                ajax_error(data);
            },
            beforeSend: function () {
                index2 = layer.load(2, {shade: [0.05, '#000']});
            },
            complete: function () {
                layer.close(index2);
            },
        });
    }
    function del(obj,id) {
        ajax('post','relation',{testdata_key_id:id,id_map:0},delBak);
        function delBak(res) {
            if(res == 1){
                location.reload();
            }
        }
    }
</script>
@endsection
